<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="app">
     <div>
       <label>ID: <input type="text" v-model="id"></label>
       <label>Name: <input type="text" v-model="name"></label>
       <button @click="add">添加</button>
     </div>
     <p>==========================</p>
     <ul>
       <li v-for="item in listArr" :key="item.id">
         <input type="checkbox">
         {{item.id}} --- {{item.name}}
       </li>
     </ul>
  </div>
  <script src="js/vue.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
           id: '',
           name: '',
           listArr: [
             {id: 1, name: '张三'},
             {id: 2, name: '李四'},
             {id: 3, name: '王五'},
             {id: 4, name: '赵六'},
             {id: 5, name: '刘七'},
             {id: 6, name: '叶八'}
           ]
        }
      },
      // itlike002
      methods:{
        add(){
           // 尾部追加
           this.listArr.push({id: this.id, name: this.name})
           // 头部追加
           // this.listArr.unshift({id: this.id, name: this.name});
           // 中间追加
           // this.listArr.splice(2, 0, {id: this.id, name: this.name});
        }
      }
    }).mount('#app');
  </script>
</body>
</html>
